<template>
  <div class="warehouseCheckDetail">
    <h4>基本信息</h4>
    <table class="table" rules="all" border="1">
      <tr>
        <td>盘点单号</td>
        <td>{{detail.checkCode}}</td>
        <td>盘点日期</td>
        <td>{{detail.checkDate}}</td>
        <td>盘点仓库</td>
        <td>{{detail.repositoryName}}</td>
      </tr>
      <tr>
        <td>备注</td>
        <td colspan="5">{{detail.remark}}</td>
      </tr>
    </table>
    <h4>盘点信息<el-checkbox v-model="isImage">显示图片</el-checkbox></h4>
    <el-table border>
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column label="图片" prop="" v-if="isImage"/>
      <el-table-column label="产品编号" prop=""/>
      <el-table-column label="产品名称" prop=""/>
      <el-table-column label="单位" prop=""/>
      <el-table-column label="规格型号" prop=""/>
      <el-table-column label="品牌" prop=""/>
      <el-table-column label="库存数量" prop=""/>
      <el-table-column label="盘点数量" prop=""/>
      <el-table-column label="盘点差异" prop=""/>
    </el-table>
  </div>
</template>

<script>
  import { warehouseCheckDetail } from "@/api/consumable/index";

  export default {
    name: "warehouseCheckDetail.vue",
    data() {
      return {
        detailId:'',
        detail:'',
        isImage:false,
      }
    },
    created() {
      this.detailId = this.$route.query.data
      this.getDetail()
    },
    methods:{
      async getDetail(){
        let res=warehouseCheckDetail(this.detailId.id)
        if(res.code==200){
          this.detail=res.data
        }else{
          this.$message.error(res.msg);
        }
      }
    }
  }
</script>

<style  lang="scss">
.warehouseCheckDetail{
  margin-left:20px;
  h4 {
    color: #05A380;
    .el-checkbox{
      padding-left:10px;
      color:#05A380;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #05A380;
      border-color: #05A380;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #05A380;
    }
  }
  .table{
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
    width:900px;
    tr {
      td:nth-child(2n-1) {
        width: 100px;
        text-align: center;
      }
      td:nth-child(2n) {
        width: 200px;
        padding-left: 10px;
      }
      td {
        line-height: 35px;
      }
    }
  }
}
</style>
